<template>
  <div class="task_det">
    <navigate>任务详情</navigate>
    <div class="block_item bottom_padding_1389">
      <div class="scale_topic bottom_line">
        <div class="scale_name">{{ taskInfo.name }}</div>
        <div class="scale_tip">任务报告整体概况</div>
      </div>
      <div class="inner_title padding_aside_694 margin_1">
        <img class="deraction_img" src="@/assets/images/common/bar.png" alt />
        <div>任务基本情况</div>
      </div>
      <div class="user_info">
        <div class="info_item width_6 info_label border_right border_bottom">
          测评任务名称
        </div>
        <div class="info_item width_7 info_ctt border_bottom">
          {{ taskInfo.name }}
        </div>
        <div
          class="info_item width_6 info_label border_right border_bottom"
          v-if="taskInfo.is_time == 1"
        >
          任务开始时间
        </div>
        <div
          class="info_item width_7 info_ctt border_bottom"
          v-if="taskInfo.is_time == 1"
        >
          {{ formatDate(taskInfo.start_time) }}
        </div>
        <div
          class="info_item width_6 info_label border_right border_bottom"
          v-if="taskInfo.is_time == 1"
        >
          任务结束时间
        </div>
        <div
          class="info_item width_7 info_ctt border_bottom"
          v-if="taskInfo.is_time == 1"
        >
          {{ formatDate(taskInfo.end_time) }}
        </div>

        <div class="info_item width_6 info_label border_right border_bottom">
          任务包含量表
        </div>
        <div class="info_item width_8 info_ctt border_right border_bottom">
          {{ taskInfo.rating_scale_count }}
        </div>
        <div class="info_item width_3 info_label border_right border_bottom">
          完成率
        </div>
        <div class="info_item width_4 info_ctt border_bottom">
          {{ taskInfo.user_complete_rate }}%
        </div>
        <div class="info_item width_6 info_label border_right border_bottom">
          任务发布人
        </div>
        <div class="info_item width_8 info_ctt border_right border_bottom">
          {{ taskInfo.user_name }}
        </div>
        <div class="info_item width_3 info_label border_right border_bottom">
          参与数
        </div>
        <div class="info_item width_4 info_ctt border_bottom">
          {{ taskInfo.user_complete_num }}
        </div>
        <div class="info_item width_6 info_label border_right border_bottom">
          测评用户姓名
        </div>
        <div class="info_item width_8 info_ctt border_right border_bottom">
          {{ userInfo.username }}
        </div>
        <div class="info_item width_3 info_label border_right border_bottom">
          年龄
        </div>
        <div class="info_item width_4 info_ctt border_bottom">
          {{ userInfo.age }}
        </div>
        <div class="info_item width_6 info_label border_right border_bottom">
          用户联系电话
        </div>
        <div class="info_item width_8 info_ctt border_right border_bottom">
          {{ userInfo.phone }}
        </div>
        <div class="info_item width_3 info_label border_right border_bottom">
          性别
        </div>
        <div class="info_item width_4 info_ctt border_bottom">
          {{ userInfo.sex == 1 ? "男" : "女" }}
        </div>
        <!-- <div class="info_item width_6 info_label border_right border_bottom">
          答题人情况
        </div>
        <div class="info_item width_8 info_ctt border_right border_bottom">
          {{ userInfo.user_number }}
        </div> -->
        <div class="info_item width_6 info_label border_right">编号</div>
        <div class="info_item width_7 info_ctt"></div>
        <!-- <div class="info_item width_1 info_label border_right">
          测评收费标准
        </div>
        <div class="info_item width_5 info_ctt">xxx</div> -->
      </div>
    </div>

    <div class="inner_title padding_aside_694 margin_1">
      <img class="deraction_img" src="@/assets/images/common/bar.png" alt />
      <div>任务包含如下量表</div>
    </div>
    <div class="block_item">
      <div
        class="item_box dis_flex white_box"
        v-for="(item, index) in taskUserList"
        :key="index"
      >
        <img :src="item.rating_scale_cover" alt="" class="item_img" />
        <div class="flex1">
          <div class="item_tit">{{ item.rating_scale_name }}</div>

          <div class="dis_flex just_space_between">
            <div>
              <div class="item_info margin_bot10">
                任务状态：{{ item.is_finish == 1 ? "已完成" : "未完成" }}
              </div>
              <div class="item_info">
                量表顺序：{{ index + 1 }}/{{ taskUserList.length }}
              </div>
            </div>

            <div
              class="item_btn"
              @click="checkResult(item.result_id)"
              v-if="item.is_finish == 1"
            >
              查看结果
            </div>
            <div class="item_btn no_fish_btn" v-else>查看结果</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryTaskDet } from "@/api/evaluation/index.js";
import { formatDate } from "@/utils/time";
export default {
  data() {
    return {
      taskUserList: [],
      taskInfo: {},
      userInfo: {},
    };
  },
  created() {
    this.getTaskDet(this.$route.query.id);
  },
  methods: {
    formatDate,
    async getTaskDet(id) {
      let res = await queryTaskDet({ id });
      if (res.code == 200) {
        this.taskInfo = res.data.taskInfo;
        this.userInfo = res.data.userInfo;
        this.taskUserList = res.data.taskUserList;
      }
    },
    checkResult(id) {
      this.$router.push(`/evaluateExport?id=${id}&type=2`);
    },
  },
};
</script>

<style scoped>
.task_det {
  color: #333333;
  background-color: #f4f6fa;
}
.dis_flex {
  display: flex;
  align-items: center;
}
.flex1 {
  flex: 1;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.just_space_between {
  justify-content: space-between;
}
.margin_bot10 {
  margin-bottom: 10px;
}
.statistics_item {
  width: 354px;
  height: 200px;
}
.color_name .item {
  margin-left: 25px;
}
.color_name .item {
  margin-bottom: 10px;
}
.color_name .item:nth-child(3n + 1) {
  margin-left: 0;
}
.color_name {
  /* height: 70px; */
  background-color: #fff;
  padding: 0 37px;
  flex-wrap: wrap;
}
.color_name .color_bar {
  width: 11.81px;
  height: 11.81px;
  border-radius: 3.47px;
}
.color_name .text {
  font-size: 12.5px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #555555;
  margin-left: 6.94px;
}

.grey_bg {
  background: #f4f6fa;
  overflow-y: hidden !important;
}
.main_content {
  height: calc(100% - 60px);
  overflow-y: auto;
  padding: 10.42px;
  box-sizing: border-box;
  display: grid;
  gap: 10.42px;
  align-content: flex-start;
}
.text_ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text_justify {
  text-align: justify;
  word-break: keep-all;
}
.block_item {
  height: fit-content;
  background: #ffffff;
  border-radius: 6.94px;
  box-sizing: border-box;
  margin: 10px;
}
.bottom_line {
  position: relative;
}
.bottom_line::before {
  display: block;
  width: 100%;
  height: 0.35px;
  background: #dddddd;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
}
.inner_title {
  height: 24.31px;
  font-size: 15.97px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: left;
  color: #333333;
  display: flex;
  align-items: center;
  gap: 10.42px;
  margin-bottom: 19.1px;
}
.deraction_img {
  height: 15.97px;
}
.padding_aside_694 {
  padding-left: 6.94px;
  padding-right: 6.94px;
}
.scale_topic {
  padding: 22.7425px 20.84px 15.4525px 20.84px;
  box-sizing: border-box;
  text-align: center;
}
.scale_name {
  font-size: 18px;
  line-height: 18px;
  color: #00aeff;
  font-weight: bold;
  margin-bottom: 16.33px;
}
.scale_tip {
  font-size: 15.33px;
  line-height: 15.33px;
  color: #666666;
}
.margin_1 {
  margin-top: 15.62px;
  margin-bottom: 15.27px;
}

.user_info {
  width: 340.28px;
  height: fit-content;
  background: #ffffff;
  border: 0.35px solid #cccccc;
  border-radius: 3.47px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.border_right {
  border-right: 0.35px solid #cccccc;
}
.border_bottom {
  border-bottom: 0.35px solid #cccccc;
}
.width_1 {
  width: calc(76.74px - 0.35px);
}
.width_2 {
  width: calc(135.76px - 0.35px);
}
.width_3 {
  width: calc(62.5px - 0.35px);
}
.width_4 {
  width: calc(69.44px);
}
.width_5 {
  width: calc(263.19px - 0.35px * 4);
}
.width_6 {
  width: calc(104.51px - 0.35px);
}
.width_7 {
  width: calc(235.42px - 0.35px * 4);
}
.width_8 {
  width: calc(103px - 0.35px);
}
.info_item {
  line-height: 24.3px;
  font-size: 12.33px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  box-sizing: border-box;
  padding: 5.21px 10.42px;
}
.info_label {
  text-align: justify;
  word-break: keep-all;
  color: #666666;
}
.info_ctt {
  color: #333333;
  /* word-break: break-all; */
}
.bottom_padding_1389 {
  padding-bottom: 13.89px;
}

.margin_2 {
  margin-top: 1.72px;
  margin-bottom: 1.72px;
}

.factor_container {
  padding-top: 17.36px;
  padding-bottom: 20.83px;
  font-size: 13.89px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: center;
  color: #333333;
}
.factor_box {
  width: 340.28px;
  height: fit-content;
  background: #ffffff;
  border: 0.35px solid #cccccc;
  border-radius: 5.21px;
}
.factor_header .factor_col {
  background: rgba(10, 167, 244, 1);
  color: rgba(241, 250, 255, 1);
  word-break: keep-all;
  text-align: center;
}
.factor_row {
  display: flex;
}
.factor_col {
  padding: 5.21px 3.82px;
  box-sizing: border-box;
}
.factor_c1 {
  width: 89.93px;
}
.factor_col:not(.factor_c1) {
  width: 62.15px;
}
.factor_row:not(.factor_header) {
  display: flex;
}
.factor_row:not(.factor_header) .factor_col:not(.factor_c1) {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* .factor_row:not(.factor_header) .factor_col:not(.factor_c1) div{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
} */
.factor_row .factor_col {
  border-bottom: 0.35px solid #cccccc;
}
.has_bottom .factor_col {
  /* border-bottom: 0.35px solid #cccccc; */
}

.analysis_item {
  width: calc(100% - 15.64px * 2);
  margin: 0 auto;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  padding: 5.21px 0;
  box-sizing: border-box;
}
.analysis_stage {
  display: flex;
  gap: 10.42px;
  margin-bottom: 10.42px;
  padding-top: 10px;
  box-sizing: border-box;
}
.stage_name {
  width: 72.05px;
  font-size: 15.28px;
  color: #333333;
  padding-top: 22.57px;
}
.analysis_explain,
.analysis_point {
  font-size: 14.58px;
  color: #333333;
  padding: 5.21px 0;
  box-sizing: border-box;
  line-height: 25px;
}
.stage_range {
  width: calc(100% - 72.05px - 10.42px);
  position: relative;
}
.stage_progress {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--step), calc(100% / var(--step)));
}
.stage_progress::before {
  display: block;
  width: 100%;
  height: 6.25px;
  background: linear-gradient(270deg, #00abff 0%, rgba(10, 167, 244, 0.3) 100%);
  border-radius: 3.13px;
  position: absolute;
  top: 27.78px;
  content: "";
}
/* .progress_inner{
  width: 100%;
  height: 6.25px;
  background: linear-gradient(270deg,#00abff 0%, rgba(10,167,244,0.30) 100%);
  border-radius: 3.13px;
  position: absolute;
  top: 27.78px;
} */
.stage_grid {
  position: relative;
}
.grid_inner {
  width: 100%;
  height: 6.25px;
  border-right: 0.69px solid #ffffff;
  box-sizing: border-box;
}
.stage_grid:last-child .grid_inner {
  border-right-width: 0px;
}
.stage_score {
  position: relative;
  margin-bottom: 1.68px;
}
.stage_score::after {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  content: "";
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top: 10px solid #00abff;
}
.stage_text {
  font-size: 12.5px;
  color: #aaaaaa;
  padding: 5.21px 2.6px;
  box-sizing: border-box;
  text-align: center;
}
.stage_grid:first-child .stage_text {
  padding-left: 0;
  text-align: left;
}
.stage_grid:last-child .stage_text {
  padding-right: 0;
  text-align: right;
}
/* .stage_text{
  position: absolute;
  bottom: 0;
  top: 6.25px;
  height: max-content;
}
.stage_text::after, .stage_text::before{
  display: block;
  content: "";
  clear: both;
} */
.stage_score {
  min-width: 34.72px;
  height: 26.04px;
  background: #0aa7f4;
  border-radius: 4.86px;
  font-size: 14.58px;
  text-align: center;
  color: #ffffff;
  padding: 0 5.21px;
  box-sizing: border-box;
}
.early_warn {
  font-size: 14px;
  line-height: 14px;
  padding: 0 16px;
  color: #333333;
}
.item_warn {
  height: 46.7px;
  line-height: 46.7px;
  border-bottom: 0.33px solid #cccc;
}
item_warn:last-child {
  border-bottom: 0;
}
.gray_txt {
  color: #666666;
}
.item_box {
  height: 113.33px;
  padding: 0 10px;
  margin-bottom: 10px;
}
.task_tit,
.task_num {
  text-align: center;
}
.task_tit {
  color: #00aeff;
  font-size: 18px;
  line-height: 18px;
  margin: 27.33px 0 13.33px;
}
.task_num {
  font-size: 14px;
  line-height: 14px;
}
.item_img {
  width: 80px;
  height: 80px;
  margin-right: 16.67px;
}
.item_tit {
  font-size: 16.67px;
  line-height: 16.67px;
  margin-bottom: 21.67px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item_info {
  font-size: 12.67px;
  line-height: 12.67px;
  color: #666666;
}
.item_btn {
  width: 73.33px;
  height: 33.33px;
  line-height: 33.33px;
  color: #ffffff;
  font-size: 12.67px;
  text-align: center;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #0aa7f4;
  border-radius: 6.67px;
}
.no_fish_btn {
  opacity: 0.5;
}
.fish_img {
  width: 16.33px;
  height: 16px;
  margin-right: 7px;
}
.fish_txt {
  color: #14c76a;
  font-size: 14px;
  line-height: 14px;
}
.deadline {
  color: #888888;
  font-size: 14px;
  line-height: 14px;
  margin: 32px auto;
  text-align: center;
}
</style>
